<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>五星好评</title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        body {
            /*文字大小12px；1.5倍的行间距，arial 一种字体*/
            font: 12px/1.5 arial;
            color: #666;
        }
        
        ul {
            padding: 0;
        }
        
        #star {
            width: 540px;
            margin: 10px auto;
        }
        
        #star span,
        #star ul {
            float: left;
            margin: 0 5px;
        }
        
        #star li {
            float: left;
            width: 24px;
            height: 24px;
            cursor: pointer;
            list-style: none;
            background-image: url(img/star.png);
            background-repeat: no-repeat;
        }
        
        li.on {
            background-position: 0 -28px;
        }
        
        #star p {
            position: absolute;
            top: 20px;
            width: 160px;
        }
        
        #star p em {
            display: block;
            font-style: normal;
            color: #f60;
        }
        
        #star span strong {
            color: #f60;
        }
    </style>
</head>

<body>
    <div id="star">
        <span>点击星星评分</span>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!--显示最终的评分结果-->
        <span></span>
        <!--显示评分及评语-->
        <p></p>
    </div>
</body>

</html>
<script>
    $(function () {
        var msg = [
            "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
            "不满意|部分有破损，与卖家描述的不符，不满意",
            "一般|质量一般，没有卖家描述的那么好",
            "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
            "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
        ]
        var isStar = 0

        // split()根据指定字符分割字符串，并返回一个数组
        // console.dir(msg[0].split('|'))
        console.log($("#star ul").position().left);

        // each() 遍历每一个jQuery对象，让每个匹配的元素执行一个函数
        // index:元素的索引，elem：DOM元素
        $('#star ul li').each(function (index, elem) {
            // console.log(elem)
            // console.dir($(this));

            $(this).mouseover(function () {
                show(index + 1);

                // 显示当前评分及评语
                var left = $('#star ul').position().left + index * $(this).width();
                var html = '<em><b>' + (index + 1) + '</b>分 ' + msg[index].split('|')[0] + '</em>' + msg[index].split('|')[1];
                $('#star p').css('left', left).html(html);
            });

            $(this).click(function () {
                // 记录当前所点击的星星编号
                isStar = index + 1;

                // 显示评分结果
                $('#star span:last').html('<strong>' + isStar + '分</strong>（' + msg[index].split('|')[1] + '）');
                $('#star p').empty();
            });


            $(this).mouseout(function () {
                show(isStar);
                $('#star p').empty();
            });

        });

        // 用来展示星星
        function show(score) {
            $('#star ul li').each(function (index) {
                this.className = index < score ? 'on' : ''

                // if (index < score) {
                // 	this.className = 'on';
                // } else{
                // 	this.className = '';
                // }
            });
        }
    });

</script>